<template>
	<view id="search">
		<!-- 搜索栏目 -->
		<u-sticky>
			<view class="search">
				<u-search 
				    v-model='search' 
					:show-action="true" 
					actionText="搜索" 
					bgColor='#F8F8F8' 
					:actionStyle='actionStyle' 
					@search='addHistory()' 
					@custom='addHistory()'
				></u-search>
			</view>
		</u-sticky>
		<!-- 历史搜索 暂未完成-->
		<view class="search_history" v-show="show">
			<view class="history_title">
				<text>历史搜索</text>
				<u-modal 
				    :show="modelShow" 
					:title="title" 
					:content='content'
					:showCancelButton='true'
					@confirm='closeModel'
					@cancel='cancel'
				></u-modal>
				<u-icon name="trash" @click="modelShow = true"></u-icon>
			</view>
			<view class="history_content">
				<u-tag
				      :text="item" 
					  size="mini" 
					  shape="circle" 
					  color='#464646' 
					  plain
					  bgColor='#F8F8F8'
					  v-for="(item,index) in historyList"
					  :key='index'
					  @click='pageJupm(item)'
				></u-tag>
			</view>
		</view>
		
		<!-- 搜索推荐 -->
		<view class="search_advice">
			<text>搜索推荐</text>
			<view class="advice_content">
				<u-tag 
				      :text="item.title" 
					  size="mini" 
					  shape="circle" 
					  color='#464646' 
					  :icon="item.icon" 
					  plain
					  
					  bgColor='#F8F8F8'  
					  v-for="(item,index) in adviceList" 
					  :key='index'
					  @click='pageJupm(item)'
				></u-tag>
			</view>
		</view>
		<!-- 同城热搜 -->
		<view class="search_hot">
			<view class="hot_title">
				<u-icon name="heart-fill" color='#FF5345'></u-icon><text>同城热搜</text>
			</view>
			<view class="hot_list">
				<view class="hot_lists">
					<view class="listItem" v-for="(item,index) in hotList" :key='index' @click='pageJupm(item)'>
						<u--image :showLoading="true" :src="item.img" width="60px" height="60px" radius='5'></u--image>
						<view class="listItem_content">
							<view class="listItem_title">
								<text>{{item.title}}</text>
								<u--text :text='item.type' align='left' color='#9E9C9C' size='12' bold='true'></u--text>
							</view>
							<view class="listItem_price">
								<!-- <u--text :text='`￥${item.price}`' align='center' color='#FC7905' size='12' :block='false' bold='true'></u--text> -->
								<text>￥{{item.price}}</text>起
							</view>
						</view>
					</view>
				</view>
				<view class="list">
					<u-tag text="查看更多榜单内容" @click='getList'></u-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modelShow:false,
				// title:'标题',
				content:'确定删除全部历史记录',
				search:'',
				historyList:[],
				adviceList:[
					{
						show:true,
						icon:'map',
						title:'老友俱乐部',
						content:'xxxxxx',
						briefTxt:'xxx',
						price:'5000'
					},
					{
						show:true,
						icon:'home',
						title:'金山敬老院',
						content:'xxxxxx',
						briefTxt:'xxx',
						price:'5000'
					},
					{
						show:true,
						icon:'home',
						title:'爱德敬老院',
						content:'xxxxxx',
						briefTxt:'xxx',
						price:'5000'
					},
					{
						show:true,
						icon:'map',
						title:'古春敬老院',
						content:'xxxxxx',
						briefTxt:'xxx',
						price:'5000'
					},
					{
						show:false,
						icon:'map',
						title:'安康通养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:'5000'
					},
				],
				hotList:[
					{
						img:'https://www.zhuinw.com/uploads/20200704/8e7000ca7bbd61e1d6f6c5916ad7595c.jpg',
						title:'重庆尚善养老院',
						type:'热门养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:2300
					},
					{
						img:'https://www.zhuinw.com/uploads/20210816/ef73469fd86f19ac1fba0b540502c42f.jpg',
						title:'泰康之家·大清谷',
						type:'热门养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:7500
					},
					{
						img:'https://www.zhuinw.com/uploads/20210719/9eecaa4eebd1efadc3d2282dcdd58c18.jpg',
						title:'上海云栖兰亭养老社区',
						type:'热门养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:5000
					},
					{
						img:'https://www.zhuinw.com/uploads/20201211/e047313e80592af56991729777144d95.jpg',
						title:'千禾养老庞各庄养老院',
						type:'热门养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:3000
					},
					{
						img:'https://www.zhuinw.com/uploads/20200421/47b41b2c93a50eabecbb482854a0529c.jpg',
						title:'广州泰成逸园养老院',
						type:'热门养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:4000
					},
					{
						img:'https://www.zhuinw.com/uploads/20201128/11805b2584973cc2cb5a17e78bc70457.jpg',
						title:'杭州万科良渚随园嘉树养老公寓',
						type:'热门养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:5000
					},
					{
						img:'https://www.zhuinw.com/uploads/20190906/c5ea8bb0f40d05b2ca32e336d253942f.jpg',
						title:'杭州万科随园嘉树养老公寓',
						type:'热门养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:5000
					},
					{
						img:'https://www.zhuinw.com/uploads/20190801/e9d6f690bbd19373e3c11920a8c8e097.jpg',
						title:'成都一暄康养养老服务中心',
						type:'热门养老院',
						content:'xxxxxx',
						briefTxt:'xxxx',
						price:5000
					}
				]
			}
		},
		onLoad() {
			
		},
		computed:{
			show(){
				return this.historyList.length
			}
		},
		methods: {
			getList(){
				console.log('没有更多了')
			},
			addHistory(){
				if(this.search!==''){
					this.historyList.unshift(this.search)
				}
				console.log(this.search)
				console.log(this.historyList)
			},
			closeModel(){
				this.modelShow=!this.modelShow;
				this.historyList=[]
			},
			cancel(){
				this.modelShow=!this.modelShow;
			},
			pageJupm(val){
				var searchData=JSON.stringify(val)
				uni.navigateTo({
					url:'../goodchoice/goodchoice?Data='+searchData
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
#search{
	background: #FFFFFF;
	// padding: 10px;
	height: 1000px;
	.search{
		padding: 10px;
		background: #FFFFFF;
		.actionStyle{
			color: red;
		}
	}
	.search_history{
		padding: 10px;
		.history_title{
			display: flex;
			justify-content: space-between;
			text{
				font-size: 28rpx;
				font-weight: 800;
				
			}
		}
		
		.history_content{
			padding-top: 10px;
			width: 100%;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			/deep/ .u-tag{
				// width: 150rpx;
				// margin: 10px 0;
				margin: 10px auto;
				padding:5px 10px;
				border: none;
				
				text{
					margin: 0 auto;
					font-size: 20rpx;
					// text-align: center;
				}
			}
		}
	}
	.search_advice{
		padding: 10px;
		text{
			font-size: 28rpx;
			font-weight: 800;
			
		}
		.advice_content{
			padding-top: 10px;
			width: 100%;
			display: flex;
			justify-content:flex-start;
			flex-wrap: wrap;
			/deep/ .u-tag{
				// width: 150rpx;
				// margin: 10px 0;
				margin: 10px 0 10px 10px;
				padding:5px 10px;
				border: none;
				
				text{
					margin: 0 auto;
					font-size: 20rpx;
					// text-align: center;
				}
			}
		}
	}
	.search_hot{
		padding: 10px;
		.hot_title{
			display: flex;
			align-items: center;
			text{
				padding: 5px;
				font-size: 34rpx;
				font-weight: 800;
				// border-bottom: 3px #35F144 solid;
			}
		}
		.hot_list{
			padding: 10px;
			border-radius: 10px;
			background:#FEF8F8 ;
			.hot_lists{
				border-bottom: 2px solid #F5F5F5;
				.listItem{
					margin-bottom: 10px;
					display: flex;
					justify-content: space-between;
					.listItem_content{
						width: 80%;
						padding: 5px 0;
						display: flex;
						justify-content: space-between;
						.listItem_title{
							line-height: 25px;
							text{
								font-size: 28rpx;
								font-weight: 700;
							}
						}
						.listItem_price{
							// line-height: 60px;
							padding-top: 30px;
							font-size: 24rpx;
							color: #676566;
							text{
								color: #FC7905;
							}
						}
					}
				}
			}
			.list{
				margin-top: 10px;
				/deep/ .u-tag{
					// width: 20%;
					text-align: center;
					background: none;
					border:none;
					cursor: pointer;
					text{
						font-size: 24rpx;
						color: #13B310;
						margin: 0 auto;
					}
				}
			}
		}
	}
}
</style>
